Codepen是一個非常了不起的網(wǎng)站，優(yōu)設(shè)哥在設(shè)計師網(wǎng)址導(dǎo)航上也大力推薦過，得到了很多同學(xué)的喜愛，也是全球web前端開發(fā)人員的圣地！

我搜索了一些時下最好最流行的codepen（僅限于HTML和CSS）。如果你能把它們?nèi)谌氲皆O(shè)計中去，那么就會大大節(jié)省很多時間。

在下面的例子中你會看到各式各樣的片段，HTML 陳列，登錄方式，垂直菜單，甚至?xí)r下最流行的主題：扁平化設(shè)計（扁平化圖像，扁平化按鈕形狀，扁平化用戶界面要素等）。好好欣賞這些精選的代碼片段吧，如果現(xiàn)在沒時間看完所有的代碼例子，那就保存下來以備不時之需吧。

更多關(guān)于前端開發(fā)的優(yōu)秀文章推薦：
《高流量網(wǎng)站CSS開發(fā)技術(shù)》
《用CSS Tables實現(xiàn)用戶界面開發(fā)和交互式布局》
《在線HTML5動畫Banner生成工具》

CSS3 Working Clock

這是一個純css3時鐘。它使用css動畫還有圖形，沒有使用任何圖片或者是js

CSS3 Pricing Table

CSS Loader

Pure CSS3 MacBook Air with Thunderbird Display and Keyboard

Twitter Button Concept

CSS3 Loading Animation

Pure CSS3 Vertical Menu with Hover Effect

CSS3 Stamp effect using radial gradients

I Love Blur

Social Navigation

Login

Calendar

Social Footer

Parallax Landscape

CSS3 Thermometer

CSS-Only Responsive Layout with Smooth Transitions

Flat CSS3 Weather Widget

Flat Responsive Sliding Boxes

Tiny CSS3 Round Breadcrumb

CSS3 Hover Effect using :after Psuedo Element

Flat UI Elements

CSS Flat Button Shapes

Email UI

Flat Icons CSS

原文地址：flashuser
譯文地址：960px

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：